<template>
    <view class="dialog" v-show="shouquan">
        <view class="dialog-cover">
            <view class="dialog-content">
                <view class="miniApp">
                    <image :src="staticImgUrl +'weixinshouquanicon.png'" mode="" class="mp-weixin-logo"></image>
                    <view class="hqsq">醒目购需要获取您的微信授权</view>
                    <view class="mini-button mini-button-userInfo" @click="wxloginNewBtn">获取用户信息</view>
                    <view class="mini-button mini-button-sq" @click="BackPage">暂不授权</view>
                </view>
            </view>
        </view>

        <view class="getphone-box" v-if="showPhoneLogin == true" @click="closeGb()"></view>
        <view class="getphone-box-item" v-if="showPhoneLogin == true">
            <view class="text-tip-box">
                <view class="getPhoneTip">温馨提示</view>
                <view>是否一键登陆，获取更多服务</view>
            </view>
            <view class="btn-show-box">
                <button class="btnsi btnsiTwo" @click="closeGb()">暂不登陆</button>
                <button class="btnsi" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登陆</button>
            </view>
        </view>

    </view>
</template>

<script>
import {
	mapGetters,
	mapMutations
} from 'vuex'
import $Store from '@/store/index.js'
export default {
	name: '',
	data() {
		return {
			showPhoneLogin: false
			// visible: false
		}
	},
	computed: {
		...mapGetters(['shouquan', 'userInfo'])
	},
	methods: {
		...mapMutations(['SET_USER_TOKEN', 'SET_USER_INFO']),
		BackPage() {
			$Store.commit('SET_SHOUQUAN', false)
			this.$util.redirectTo('/pages/index/index/index')
		},

		/**
         * 获取用户 微信信息
         * wxloginNewBtn
         */
		wxloginNewBtn(e) {

			// #ifdef H5
			$Store.commit('SET_SHOUQUAN', false)
			this.$util.jumpLogin()
			// #endif
			// #ifdef MP-WEIXIN
			uni.showLoading({
				title: '授权登录中...'
			})
			var that = this
			// 新版本获取用户信息
			wx.getUserProfile({
				desc: '用于完善用户资料',
				lang: 'zh_CN',
				success(res) {
					uni.hideLoading()
					// console.log('wx.getUserProfile=>用户允许了授权',res);
					if (!res.encryptedData) {
						uni.showModal({
							title: '提示',
							content: '请更新到最新版本微信App',
							confirmColor: '#FD3B5C',
							showCancel: false,
							success(res) {
								if (res.confirm) {
									// console.log('用户点击确定');
								} else if (res.cancel) {
									// console.log('用户点击取消');
								}
							}
						})
						return
					}
					that.$util.tip('获取成功')
					let newUserInfo = that.$util.deepClone(that.userInfo)
					uni.setStorageSync('iv', res.iv)
					uni.setStorageSync('encryptedData', res.encryptedData)
					// console.log(newUserInfo)
					newUserInfo.headimg = res.userInfo.avatarUrl
					newUserInfo.nickname = res.userInfo.nickName
					newUserInfo.sex = res.userInfo.gender
					that.SET_USER_INFO(newUserInfo)
					wx.login({
						success: loginres => {
							uni.setStorageSync('code', loginres.code)
							setTimeout(() => {
								that.showPhoneLogin = true
							}, 500)
						}
					})
				},
				fail(res) {
					uni.hideLoading()
					// console.log('wx.getUserProfile=>用户拒绝了授权',res);
					that.BackPage()
				}
			})
			// #endif
		},

		/**
         * closeGb
         * 关闭所有弹窗
         */
		closeGb() {
			this.showPhoneLogin = false
			this.BackPage()
		},

		/**
         *  拿到微信code 获取用户信息
         * getPhoneNumber
         */
		getPhoneNumber(e) {
			uni.showLoading()
			if (e.target.errMsg == 'getPhoneNumber:ok') {

				let newUserInfo = this.$util.deepClone(this.userInfo)
				let options = {
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				}
				this.$request
					.weappLogin1({
						code: uni.getStorageSync('code'),
						user_iv: uni.getStorageSync('iv'),
						user_encryptedData: uni.getStorageSync('encryptedData'),
						mobile_iv: options.iv,
						mobile_encryptedData: options.encryptedData
					})
					.then(res => {
						uni.hideLoading()
						this.SET_USER_TOKEN(res.data.token)
						uni.setStorageSync('token', res.data.token)
						// 判断是否填写过资料
						if (!res.data.is_first) {
							let newObj = {
								token: res.data.token,
								headimg: newUserInfo.headimg,
								nickname: newUserInfo.nickname,
								sex: newUserInfo.sex
							}
							this.$request.modifyInfo(newObj).then(succ => {
								this.$request
									.getUserInfo({
										token: res.data.token
									})
									.then(info => {
										this.SET_USER_INFO(info.data)
										this.closeGb()
									})
							})
						} else {
							that.BackPage()
						}
					})

			}
		}
	}
}
</script>

<style  lang="scss">
.dialog {
    z-index: 2000;
}
.dialog-cover {
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dialog-content {
    z-index: 300;
    background-color: #fff;
    width: 100%;
    margin: 0 80rpx;
    padding: 40rpx;
    border-radius: 60rpx;
    text-align: center;
}
.miniApp {
    .hqsq {
        font-size: 18px;
    }
    .mp-weixin-logo {
        width: 257.5rpx;
        height: 239.5rpx;
        margin: 80rpx 0;
    }
    .mini-tip {
        font-size: 32rpx;
        margin-top: 60rpx;
    }
    .mini-button-userInfo {
        margin-top: 76rpx;
        background: linear-gradient(90deg, #ff7044, #fd3b5c);
        color: #fff;
    }
    .mini-button {
        width: 100%;
        border-radius: 44rpx;
        height: 88rpx;
        text-align: center;
        line-height: 88rpx;
    }
    .mini-button-sq {
        background-color: #f4f4f4;
        margin-top: 40rpx;
        border: 1px solid #f4f4f4;
    }
}

.getphone-box {
    position: absolute;
    left: 0px;
    top: 0px;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
    height: 100%;
    filter: alpha(opacity=60);
    /*设置透明度为60%*/
    opacity: 0.6;
    /*非IE浏览器下设置透明度为60%*/
    z-index: 9999;
}

.getphone-box-item {
    position: absolute;
    width: 640rpx;
    height: 420rpx;
    border-radius: 20rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    z-index: 99999;
}

.text-tip-box {
    padding-top: 56rpx;
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
}
.btn-show-box {
    display: flex;
    justify-content: space-around;
    padding-top: 66rpx;
}

.btnsi {
    width: 260rpx;
    height: 80rpx;
    background: #4dc669;
    border-radius: 8rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 80rpx;
}

.btnsiTwo {
    background: #f4f4f4;
    color: #000000;
}

/* 设备横屏时调用该段css代码 */
@media all and (orientation: landscape) {
    .dialog-content {
        width: 50%;
        height: 100%;
    }
    .getPhoneTip {
        font-size: 20px;
        color: #000000;
        padding-bottom: 30px;
    }
    .getphone-box-item {
        position: absolute;
        width: 320px;
        height: 210px;
        border-radius: 10px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        z-index: 99999;
    }
    .btnsi {
        width: 130px;
        height: 40px;
        background: #4dc669;
        border-radius: 8rpx;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        line-height: 40px;
    }

    .btnsiTwo {
        background: #f4f4f4;
        color: #000000;
    }

    .text-tip-box {
        padding-top: 28px;
        text-align: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
    }

    .btn-show-box {
        display: flex;
        justify-content: space-around;
        padding-top: 33px;
    }

    .miniApp {
        .mp-weixin-logo {
            width: 128px;
            height: 119px;
            margin: 0;
        }
        .mini-button-userInfo {
            margin-top: 38px;
        }
        .mini-button {
            border-radius: 22px;
            height: 44px;
            text-align: center;
            line-height: 44px;
            font-size: 15px;
        }
        .mini-button-sq {
            margin-top: 20px;
        }
    }
}
</style>
